<template>
  <el-col :span="span || 6">
    <el-form-item :label="label" :label-width="labelwidth || '120px'" :prop="prop" :class="searchFrom ? 'searchFrom' : ''">
      <el-date-picker
        v-model="dateVal"
        :type="type"
        :placeholder="'请选择' + label"
        :value-format="valueFormat"
        :disabled="disabled"
        start-placeholder="开始日期"
        range-separator="至"
        end-placeholder="结束日期"
        :style="{ width: selectWidth }"
      />
    </el-form-item>
  </el-col>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit, Watch, Model } from "vue-property-decorator";
// other

@Component({ name: "BaseFormDatePicker" })
export default class BaseFormDatePicker extends Vue {
  @Prop(String) label!: string; // form label 标题
  @Prop(String) prop!: string; // form prop 属性
  @Prop(Number) span?: number; // el-col 宽度
  @Prop(String) type?: string; // 时间选择类型
  @Prop(String) ph?: string;
  @Prop(Boolean) searchFrom?: boolean;
  @Prop(Boolean) disabled!: boolean;
  @Prop({ type: String, default: "yyyy-MM-dd" }) valueFormat!: string;
  @Prop({ type: String, default: "130px" }) labelwidth!: string;
  @Prop({ type: String, default: "100%" }) selectWidth!: string;
  @Model("input") value!: string; // 日期值
  dateVal = "";
  @Watch("value", { immediate: true })
  valueWatch(val: string, oldV: string) {
    if (val === oldV || val === this.dateVal) return;
    this.dateVal = val;
  }
  @Watch("dateVal")
  dateValWatch(val: string, oldV: string) {
    if (val === oldV) return;
    this.onChange(val);
  }
  @Emit("input")
  onChange(val: any) {
    return val;
  }
}
</script>

<style lang="scss">
.searchFrom {
  display: flex !important;
  .el-form-item__label-wrap {
    flex: 0 0 4.3em;
  }
  .el-date-editor {
    width: auto !important;
    max-width: 217px;
  }
}
</style>
